<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>商店详情</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.css">
    <link rel="stylesheet" href="css/demos.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="./js/swiper.min.css"/>
</head>
<style>
    .swiper-slide img {
        width: 100%;
        height: 200px;
    }

    .swiper_top {
        font-size: 0;
    }

    .weui_grid_label {
        color: #666;
    }

    .xx-lb {
        margin: 0 auto;
        width: 100%;
    }

    .xx-lb li ul li,
    .xx-lb li {
        padding: 0 !important;
        margin-bottom: 0 !important;
        line-height: 20px;
        font-size: 14px !important;
        color: #666 !important;
    }

    .weui-cells {
        margin-top: 0;
        font-size: 14px;
    }

    .store_tab {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 10px;
    }

    .tab_btn {
        width: 50%;
        height: 40px;
        color: #333;
        background: #fff;
        text-align: center;
        line-height: 40px;
    }

    .tab_btn:first-child {
        width: calc(50% - 1px);
        border-right: solid 1px #e1e1e1;
    }

    .active_tab {
        color: #6670ff;
    }

    .intro {
        overflow: hidden;
        background: #fff;
    }

    .likes {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        background: url("./images/shoucang.png") no-repeat;
        background-size: 100%;
    }

    .likes_active {
        background: url("./images/shoucang1.png") no-repeat;
        background-size: 100%;
    }

    .store_ad {
        width: 90%;
        margin: 10px auto;
        padding: 3px 10px;
        font-size: 14px;
        display: flex;
        align-items: center;
        background-color: #fff;
        box-shadow: 0 0px 5px #dcdcdc;
        border-radius: 5px;
    }

    .store_ad i {
        font-size: 24px;
        color: #0F78FB;
        margin-right: 10px;
    }

    .store_ad span {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }

    .sc-list {
        display: none;
    }

    .intro_inner {
        overflow: hidden;
    }

    .intro img {
        width: 100%;
    }

    .inner_swiper {
        height: 75px;
    }

    .shop_some::before {
        content: "";
        width: 3px;
        height: 20px;
        background: #6670ff;
        position: absolute;
        top: 4px;
        left: 10px;
    }

    .shop_some {
        line-height: 25px;
        font-size: 16px;
        color: #333;
        position: relative;
        padding-left: 20px;
        margin-bottom: 5px;
    }

    .show_text {
        font-size: 14px;
        color: #333;
        text-indent: 2em;
        line-height: 25px;
    }

    .j_weui {
        background-color: #fff;
        margin-bottom: 10px;
    }

    .weui-cell__ft {
        display: flex;
        align-items: center;
    }

    .weui-cell__ft i {
        font-size: 20px;
        line-height: 100%;
    }
    .block {
        height: 44px;
    }
    .close{
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 20px;
        background-color: rgba(0,0,0,.3);
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-content: center;
        border-radius: 50%;
        color: #666;
    }
</style>

<body ontouchstart>
<div class="topNav" style="display: flex">
    <a href="javascript:history.back(-1)"><i class="iconfont icon-zuo"></i></a>
    <p>商铺详情</p>
</div>
<div class="block"></div>
<div class="swiper-container swiper_top">
    <div class="swiper-wrapper" id="shopCarousel">

    </div>
</div>

<div class="store_name">
    <div class="store_top_name">
        <p class="store_title" id="shopName"></p>
        <p id="shopAdress"></p>
    </div>
    <div class="address">
        <img src="./images/dw.png" alt="">
        <p>查看位置</p>
    </div>
</div>
<div class="line"></div>
<div class="store_ad">
    <i class="iconfont icon-gonggao"></i>
    <span id="shopMsg">请关注“有有积分”公众号查看积分详情</span>
</div>
<div class="j_weui">
    <div id="shopTel">

    </div>
</div>
<div class="intro">
    <p class="shop_some">店铺简介</p>
    <div id="shopDetailImg">

    </div>
</div>
<div class="block"></div>
<div class="store_footer">
    <div class="footer_item">
        <div class="likes"></div>
        收藏
    </div>
    <!-- <img src="./images/lianxi.png" alt=""> -->
    <div class="footer_item" onclick="$('.weui-share').show().addClass('fadeIn');"><img src="./images/share.png" alt="">分享
    </div>
    <div class="footer_item" onclick="goPay()">
        <div class="footer_price">去支付</div>
    </div>
</div>
<div class="model" hidden>
    <div class="model-content">
        <iframe src="" frameborder="0"></iframe>
        <div class="close">
            X
        </div>
    </div>
</div>
<div class="weui-share" onclick="$(this).fadeOut();$(this).removeClass('fadeOut')">
    <div class="weui-share-box">
        点击右上角发送给指定朋友<i></i>
    </div>
</div>
</body>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js"></script>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swipe.js"></script>
<script src="wxJs/utils/contain.js"></script>
<script src="wxJs/utils/storage.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

<script>
    var shopId = GetQueryString("shopId");   //商铺id
    if (!shopId) {
        window.history.back(-1);
    }
    var userId = GetQueryString("userId");   //用户id
    var currurl = window.location.href.split('#')[0];

    function getWeixinPram() {
        $.getJSON(getWeiContextPath() + "/wx/data/getWeixinPram?currurl=" + escape(currurl), function (resp) {
            if (resp.code == 0) {
                var payPram = resp.data;
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: payPram.appId, // 必填，公众号的唯一标识
                    timestamp: payPram.wxtimeStamp, // 必填，生成签名的时间戳
                    nonceStr: payPram.wxnonceStr, // 必填，生成签名的随机串
                    signature: payPram.wxsign,// 必填，签名，见附录1
                    jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });
                wx.error(function (res) {
                    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，
                    // 对于SPA可以在这里更新签名。
                    $.alert(res);
                });
                wx.ready(function () {
                    wx.showOptionMenu();
                    //分享给朋友
                    wx.updateAppMessageShareData({
                        title: $("#shopName").text(), // 分享标题
                        desc: "到店消费可使用“有有积分”支付，获得积分", // 分享描述
                        link: getWeiContextPath() + "/wxMoudle/store.html?shopId=" + shopId + "&type=1", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: getWeiContextPath() + "/wxMoudle/images/logo3.png", // 分享图标
                    }, function (res) {
                        //这里是回调函数

                    });
                    wx.updateTimelineShareData({
                        title: $("#shopName").text(), // 分享标题
                        link: getWeiContextPath() + "/wxMoudle/store.html?shopId=" + shopId + "&type=1", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: getWeiContextPath() + "/wxMoudle/images/logo3.png", // 分享图标
                    }, function (res) {
                        //这里是回调函数

                    });
                });
            } else {
                $.toast("分享功能参数获取失败", "forbidden")
            }
        })
    }

    //判断是否是分享过来需要授权的
    var getRequest = GetRequest();
    var code = getRequest.code;
    if (code) {  //携带code 让其注册
        $.ajax({
            type: "POST",
            cache: false,
            data: {code: code, shopId: shopId},
            async: false,
            url: getWeiContextPath() + "/wx/VipUser/toInsert",
            success: function (result) {
                userId = result.data.id
                $(".topNav").html('<a href="index.html?userId=' + userId + '"><i class="iconfont icon-zuo"></i></a>\n' +
                    '    <p>商铺详情</p>')
            },
            error: function (result) {
                $.toast("网络走丢了", "forbidden")
                window.history.back(-1);
            }
        });
    }
    var type = GetQueryString("type");
    if (type == 1 && !userId) {    //无用户信息,并且携带type(根据分享携带type),让其注册
        toInsert();
    }
    var lat = ''
    var lng = ''
    $(function () {
        //打开回显地图点位的iframe
        $('.address').on('click', function () {
            if (!$(".model iframe").attr("src")) {
                $(".model iframe").prop('src', 'lookMap.html?lat=' + lat + '&lng=' + lng)
            }
            $('.model').show()
        });
        //关闭iframe层
        $(".close").on('click', function () {
            $('.model').hide()
        })
        //收藏按钮
        $(".likes").on('click', function () {
            if (userId == 0) {
                window.location.replace("me.html?userId=0");
            }
            $(".likes").toggleClass("likes_active")
            if ($(".likes").hasClass('likes_active')) {     //收藏样式
                $.post(getWeiContextPath() + "/wx/shop/saveCollect", {
                    shopId: shopId,
                    userId: userId
                }, function (res) {
                    $.toast(res.msg)
                })
            } else {   //取消了收藏样式
                $.post(getWeiContextPath() + "/wx/shop/cancelCollect", {
                    shopId: shopId,
                    userId: userId
                }, function (res) {
                    $.toast(res.msg)
                })
            }
        })
        selectShopById()   //查询店铺基本信息
        selectShopCarouselByShopId()   //查询店铺轮播
        selectSelfCollect()    //查询用户是否收藏此店铺
    })

    function selectShopById() {
        $.post(getWeiContextPath() + "/wx/shop/selectShopById", {shopId: shopId}, function (res) {
            if (res.code == 0) {
                res = res.data
                if (res.isValid != 1) {
                    $.toast("此商铺状态异常", "forbidden", function () {
                        window.location.replace("me.html?userId=" + userId)
                    })
                }

                $('#shopName').text(res.shopName);
                $('#shopAdress').text(res.shopAdress);
                if (res.shopMsg) {
                    $('#shopMsg').text(res.shopMsg);
                }
                //拨打电话
                $('#shopTel').append('<a class="weui-cell" href="tel:' + res.sysTel + '">\n' +
                    '            <div class="weui-cell__bd">\n' +
                    '                <p>电话</p>\n' +
                    '            </div>\n' +
                    '            <div class="weui-cell__ft">\n' +
                    '                <span >' + res.sysTel + '</span>\n' +
                    '                <i class="iconfont icon-shoujihao"></i>\n' +
                    '            </div>\n' +
                    '        </a>');
                $('#shopDetailImg').html(res.shopDetailImg);
                lat = res.shopLatitude
                lng = res.shopLongitude
                getWeixinPram()
            } else {
                $.toast("系统错误,请重试", "forbidden")
            }

        })
    }

    function selectShopCarouselByShopId() {
        $.post(getWeiContextPath() + "/wx/shop/selectShopCarouselByShopId", {shopId: shopId}, function (res) {

            var _shopCarousel = $('#shopCarousel').empty();
            if (res) {
                $.each(res, function (i, obj) {
                    _shopCarousel.append(' <div class="swiper-slide">\n' +
                        '                <img src="' + getImgSrc(obj) + '" alt="">\n' +
                        '            </div>')
                })
                var mySwiper = new Swiper('.swiper-container', {
                    // loop: true,
                    autoplay: 2500,
                    speed: 300,
                })
            }
        })
    }

    function selectSelfCollect() {
        if (userId && userId!='0') {
            $.ajax({
                type: "POST",
                cache: false,
                data: {userId: userId, shopId: shopId},
                async: false,
                url: getWeiContextPath() + "/wx/shop/selectSelfCollect",
                success: function (res) {
                    if (res.code == 0) {     //数据库查询有保存
                        $(".likes").addClass('likes_active')    //添加收藏的样式
                    }
                }
            });
        }
    }


    function toInsert() {
        var pageUrl = window.location.href
            .replace(/[/]/g, "%2f")
            .replace(/[:]/g, "%3a")
            .replace(/[#]/g, "%23")
            .replace(/[&]/g, "%26")
            .replace(/[=]/g, "%3d");
        var url =
            "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
            getWeixinConfig().APPID +
            "&redirect_uri=" +
            pageUrl +
            "&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect";
        window.location.href = url;
    }

    function goPay() {
        if (userId) {
            var userInfo = getUserInfo(userId);
            if (userInfo != 'undefined' && userInfo != null && userInfo != '') {   //未绑定手机号
                if (!userInfo.phoneNum) {
                    $.toast("绑定手机号才能获得积分", "text", function () {
                        $.actions({
                            actions: [{
                                text: "去绑定手机号",
                                onClick: function () {
                                    window.location.href = "phone.html?userId=" + userId+"&goType=1";
                                }
                            }],
                            onClose: function () {    //取消事件
                                window.location.href = "pay.html?shopId=" + shopId + "&userId=" + userId + "&shopName=" + $('#shopName').text();
                            }
                        });
                    })
                } else {    //绑定了手机号
                    window.location.href = "pay.html?shopId=" + shopId + "&userId=" + userId + "&shopName=" + $('#shopName').text();
                }
            } else {
                window.location.href = "me.html?userId=0";
            }
        }else {
            window.location.href = "me.html?userId=0";
        }
    }

    window.addEventListener("pageshow", function (e) {
        if (WeixinJSBridge) {
            // 通过下面这个API隐藏右上角按钮
            WeixinJSBridge.call('showOptionMenu');
        }
    });
</script>

</html>